<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类拳皇游戏

    </title>
    
</head>
<body>
    

    <div style="position: relative; display: inline-block;">
        <div style="position: absolute; display: flex;width: 100%; align-items: center;;">
            <!-- player health -->
            <div style="position: relative; width: 100%; display: flex; justify-content: flex-end;border: 4px solid white;">
                <div  style=" background-color: yellow; height: 30px; width: 100%;;"></div>
                <div id="playerhealth" style="position: absolute;background-color:rgb(77, 77, 189); top: 0;  right: 0; bottom: 0; width: 100%;"></div>
            </div>
            <!-- timer -->
            <div id="timer"  style="background-color: white; width: 100px; height: 50px; flex-shrink: 0; display: flex ; align-items: center; justify-content: center;">10</div>
            <!-- enemy health -->
            <div style="position: relative; width: 100%;border: 4px solid white;">
                <div  style=" background-color: yellow; height: 30px;"></div>
                <div id="enemyhealth" style="position: absolute;background-color: rgb(77, 77, 189); top: 0; left: 0; right: 0; bottom: 0;"></div>
            </div>
        </div>
        <div id="displaytext" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: white;font-size: 150px; display: none;">平局</div>
        <canvas></canvas>
    </div>
    <script src="../Game1/js/guy.js"></script>
    <script src="../Game1/js/index.js"></script>
</body>

<style>
    *{
        box-sizing: border-box;
    }
    body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        
        
</style>
</html>